<template>
  <div>
    <div class="leftTop">
      <div class="leftTopone">
        <div></div>
        <div>计划指标总览</div>
        <div></div>
        <div>...</div>
      </div>
      <div class="leftToptwo">
        <div class="leftToptwoDiv" v-for="item in overview[0]" :key="item.id">
          <p><i :class="item.clas"></i></p>
          <p>{{ item.classify }}</p>
          <p>{{ item.quantity }}</p>
        </div>
      </div>
      <div class="leftTopthree">
        <div class="leftToptwoDiv" v-for="item in overview[1]" :key="item.id">
          <p><i :class="item.clas"></i></p>
          <p>{{ item.classify }}</p>
          <p>{{ item.quantity }}</p>
        </div>
      </div>
    </div>
    <div class="leftMain">
      <div class="leftMainOne">
        <div>
          <div></div>
          计划建议
        </div>
        <div></div>
        <div>
          <select name="" id="select" @change="selectV">
            <option value="1">发展投入</option>
            <option value="2">指标计划</option>
          </select>
        </div>
        <div>...</div>
      </div>
      <div class="leftMainTwo">
        <div v-show="selectValue == 1" class="leftMainTwo_1">
          <el-tabs style="margin: 10px; flex: 1" v-model="activeName">
            <!-- echarts 环形图 -->
            <el-tab-pane label="产业" name="first" style="height: 285px">
              <div
                class="leftMainTwoE"
                ref="leftMainTwoE"
                style="height: 280px"
              ></div>
            </el-tab-pane>
            <el-tab-pane label="模块" name="second">模块</el-tab-pane>
            <el-tab-pane label="专享" name="third">专享</el-tab-pane>
            <el-tab-pane label="单位" name="fourth">单位</el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="selectValue == 2" class="leftMainTwo_2">
          <div class="leftToptwo">
            <div
              class="leftToptwoDiv"
              v-for="item in overview[0]"
              :key="item.id"
            >
              <p><i :class="item.clas"></i></p>
              <p>{{ item.classify }}</p>
              <p>{{ item.quantity }}</p>
            </div>
          </div>
          <div class="leftTopthree">
            <div
              class="leftToptwoDiv"
              v-for="item in overview[1]"
              :key="item.id"
            >
              <p><i :class="item.clas"></i></p>
              <p>{{ item.classify }}</p>
              <p>{{ item.quantity }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="leftBottom">
      <div class="leftBottomOne">
        <div>
          <div></div>
          计划下达
        </div>
        <div></div>
        <div>
          <select>
            <option value="1">计划指标</option>
            <option value="2">指标计划</option>
          </select>
        </div>
        <div @click="dialogShow = true">...</div>
      </div>
      <div class="leftToptwo">
        <div class="leftToptwoDiv" v-for="item in overview[0]" :key="item.id">
          <p><i :class="item.clas"></i></p>
          <p>{{ item.classify }}</p>
          <p>{{ item.quantity }}</p>
        </div>
      </div>
      <div class="leftTopthree">
        <div class="leftToptwoDiv" v-for="item in overview[1]" :key="item.id">
          <p><i :class="item.clas"></i></p>
          <p>{{ item.classify }}</p>
          <p>{{ item.quantity }}</p>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogShow">
      <div slot="title" class="dialog-title">
        <i class="el-icon-edit-outline"></i>
        <span class="title-text">替换</span>
      </div>

      echarts占位
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="dialogShow = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script >
import Vue from "vue";

export default Vue.extend({
  components: {},
  data() {
    return {
      selectValue: 1,
      activeName: "first",
      //leftTop 数据
      overview: [
        //计划指标总览
        [
          {
            id: "0a",
            classify: "发展投入(亿元)",
            clas: "el-icon-s-order",
            quantity: 1045,
          },
          {
            id: "1a",
            classify: "线损率(%)",
            // imgs: require("./img/1_03.gif"),
            clas: "el-icon-s-order",
            quantity: 4.5,
            Percentages: -1.15,
          },
          {
            id: "2a",
            classify: "营业收入（万元）",
            // imgs: require("./img/1_03.gif"),
            clas: "el-icon-s-order",
            quantity: 6269154,
            Percentages: 0,
          },
          {
            id: "3a",
            classify: "利润总额（万元)",
            clas: "el-icon-s-order",
            // imgs: require("./img/1_03.gif"),
            quantity: -90655,
            Percentages: 0,
          },
        ],
        [
          {
            id: "5a",
            classify: "资产总额（亿元)",
            // imgs: require("./img/1_03.gif"),
            clas: "el-icon-s-order",
            quantity: 1102,
            Percentages: 0,
          },
          {
            id: "6a",
            classify: "资产",
            clas: "el-icon-s-order",
            // imgs: require("./img/1_03.gif"),
            quantity: 64.8,
            Percentages: 0,
          },
        ],
      ],
      dialogShow: false,
      formLabelWidth: "120px",
    };
  },
  mounted() {
    //改变icon 图标的颜色
    this.classicon();
    this.leftMainTwoEchart();
  },
  methods: {
    //改变icon 图标的颜色
    classicon() {
      let icons = document.getElementsByClassName("leftToptwoDiv");
      let ico = document.querySelectorAll(".leftToptwoDiv p i");
      for (let i = 0; i < ico.length; i++) {
        if (i == 0 || i == 3 || i == 4 || i == 6 || i == 9 || i == 10) {
          ico[i].style.color = "#1890FF";
        } else if (i == 1 || i == 5 || i == 7 || i == 11) {
          ico[i].style.color = "#FFBC09";
        } else if (i == 2 || i == 8) {
          ico[i].style.color = "#8CC473";
        }
      }
    },
    //select  change事件
    selectV() {
      let sValue = document.getElementById("select");
      //  console.log(sValue.value);
      this.selectValue = sValue.value;
    },
    //饼图
    leftMainTwoEchart() {
      const leftMainTwoE = this.$echarts.init(this.$refs.leftMainTwoE);
      const option = {
        title: {
          text: "产业",
          x: "center",
          y: "center",
        },
        tooltip: {
          trigger: "item",
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: "vertical",
          right: 10,
          bottom: 10,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,

            label: {
              normal: {
                formatter: "{b}：{d}% ",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
                formatter: `{c}({d}%)`,
              },
            },
            labelLine: {
              show: true,
              normal: {
                smooth: 0.1,
                length: 10,
                length2: 20,
              },
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
            ],
          },
        ],
      };
      leftMainTwoE.setOption(option);
    },
    handleClickReplace() {
      console.log("替换");
    },
  },
});
</script>
<style scoped>
.leftTop {
  width: 509px;
  margin: 10px;
  margin-right: 0;
  height: 286px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leftTopone {
  width: 510px;
  height: 26px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.leftTopone > :nth-child(1) {
  width: 104px;
  height: 1px;
  margin-top: 15px;
  background: #d8d8d8;
}
.leftTopone > :nth-child(3) {
  width: 104px;
  height: 1px;
  margin-top: 15px;
  background: #d8d8d8;
}
.leftTopone > :nth-child(2) {
  line-height: 35px;
  margin: 0 40px;
  font-size: 16px;
  font-weight: bold;
  font-weight: 700;
}
.leftTopone > :nth-child(4) {
  line-height: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: bolder;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: solid 1px #ccc;
  position: absolute;
  right: 12px;
  top: 6px;
  color: #d3d3d3;
  cursor: pointer;
  z-index: 9;
}
.leftToptwo {
  width: 94%;
  height: 108px;
  border: solid 1px #c3c3c3;
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
  margin-top: 10px;
  align-items: center;
}
.leftToptwoDiv {
  word-break: keep-all;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 114px;
  height: 106px;
  text-align: center;
  font-size: 15px;
  position: relative;
  cursor: pointer;
}
.leftTopthree {
  width: 94%;
  height: 108px;
  border: solid 1px #c3c3c3;
  display: flex;
  /* justify-content: space-around; */
  flex-flow: wrap;
  margin-top: 10px;
}

/* leftMain */
.leftMain {
  width: 509px;
  margin: 10px;
  margin-right: 0;
  height: 386px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border: solid 1px #ccc;
  border-radius: 1%;
}
.leftMainOne {
  width: 509px;
  height: 36px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.leftMainOne > :nth-child(4) {
  line-height: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: bolder;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: solid 1px #ccc;
  color: #d3d3d3;
  cursor: pointer;
  z-index: 9;
}

.leftMainTwo {
  display: flex;
  height: 351px;
}
.leftMainTwo_1 {
  flex: 1;
  width: 100%;
  display: flex;
}
.leftMainTwo_2 {
  margin-top: 23px;
  width: 100%;
  height: 300px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* leftBottom */
.leftBottom {
  width: 509px;
  margin: 10px;
  margin-right: 0;
  height: 286px;
  background: #fff;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leftBottomOne {
  width: 509px;
  height: 36px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.leftBottomOne > :nth-child(4) {
  line-height: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: bolder;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: solid 1px #ccc;
  color: #d3d3d3;
  cursor: pointer;
  z-index: 9;
}
</style>




